<template>
  <view class="contact-list">
    <u-list>
      <u-list-item v-for="contact in list" :key="contact.id"> 
        <u-card :title="contact.name"  :thumb="contact.avatar"  @click="$emit('view-detail', contact.id)"> 
          <view slot="body">
            <text>{{contact.age}} 岁 | {{contact.height}}cm  | {{contact.education}}</text> 
            <text>{{contact.hometown}}  | {{contact.workCity}}</text> 
          </view>
          <view slot="foot">
            <u-button size="mini" @click.stop="$emit('share',  contact)">分享</u-button>
            <u-button 
              size="mini" 
              :type="contact.followed  ? 'warning' : 'primary'" 
              @click.stop="toggleFollow(contact)"> 
              {{contact.followed  ? '已关注' : '关注'}}
            </u-button>
          </view>
        </u-card>
      </u-list-item>
    </u-list>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    toggleFollow(contact) {
      if (contact.followed)  {
        this.$emit('unfollow', contact.id) 
      } else {
        this.$emit('follow', contact.id) 
      }
    }
  },
  created() {
  	console.log('list111',this.list)
  }
}
</script>